.button {
    position: relative;
    width: 500px;
    appearance: none;
    background: #f72359;
    padding: 1em 2em;
    border: none;
    color: white;
    font-size: 1.2em;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    border-radius: 100px;
  
    span {
      position: relative;
    }
  
    &::before {
      --size: 0;
      content: '';
      position: absolute;
      left: var(--x);
      top: var(--y);
      width: var(--size);
      height: var(--size);
      background: radial-gradient(circle closest-side, #4405f7, transparent);
      transform: translate(-50%, -50%);
      transition: width .2s ease, height .2s ease;
    }
  
    &:hover::before {
      --size: 400px;
    }
  }